<template>
  <div class="waterfall-column" :style="columnStyle">
    <ProductWaterfallCard
      v-for="product in products"
      :key="product.id"
      :product="product"
      :min-image-height="minImageHeight"
      :max-image-height="maxImageHeight"
      @click="handleProductClick"
      @image-load="handleImageLoad"
      @image-error="handleImageError"
    />
    
    <!-- 骨架屏 -->
    <div v-if="showSkeleton" class="skeleton-wrapper">
      <div
        v-for="i in skeletonCount"
        :key="`skeleton-${i}`"
        class="skeleton-card"
        :style="{ height: getSkeletonHeight(i) + 'px' }"
      >
        <van-skeleton
          :row="3"
          :loading="true"
          avatar
          avatar-size="100%"
          avatar-shape="square"
          class="skeleton-content"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import ProductWaterfallCard, { type ProductItem } from './ProductWaterfallCard.vue'

// Props
interface Props {
  products: ProductItem[]
  columnWidth?: string | number
  gap?: number
  minImageHeight?: number
  maxImageHeight?: number
  showSkeleton?: boolean
  skeletonCount?: number
}

const props = withDefaults(defineProps<Props>(), {
  columnWidth: '50%',
  gap: 12,
  minImageHeight: 150,
  maxImageHeight: 300,
  showSkeleton: false,
  skeletonCount: 3
})

// Emits
const emit = defineEmits<{
  productClick: [product: ProductItem]
  imageLoad: [product: ProductItem]
  imageError: [product: ProductItem]
}>()

// 计算属性
const columnStyle = computed(() => ({
  width: typeof props.columnWidth === 'number' ? `${props.columnWidth}px` : props.columnWidth,
  paddingRight: `${props.gap / 2}px`,
  paddingLeft: `${props.gap / 2}px`
}))

// 方法
function handleProductClick(product: ProductItem): void {
  emit('productClick', product)
}

function handleImageLoad(product: ProductItem): void {
  emit('imageLoad', product)
}

function handleImageError(product: ProductItem): void {
  emit('imageError', product)
}

function getSkeletonHeight(index: number): number {
  // 为骨架屏生成随机高度，模拟真实商品卡片
  const heights = [200, 250, 180, 220, 280, 160, 240]
  return heights[index % heights.length]
}
</script>

<style scoped>
.waterfall-column {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.skeleton-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.skeleton-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
}

.skeleton-content {
  padding: 12px;
  height: 100%;
}

/* 骨架屏动画 */
.skeleton-card {
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .skeleton-content {
    padding: 10px;
  }
}
</style>